<style lang="sass" scoped>
    .container{
        padding-bottom:122px;
    }
    .imgs,.swiper-container{
        height:750px;
        img{
            display:block;
            height:100%;
            width:100%;
        }
    }
    .book-info{
        padding:30px 40px 40px;
        .name{
            font-size:36px;
            color:#000;
        }
        .title{
            font-size:26px;
            color:#bebebe;
            overflow : hidden;
            text-overflow: ellipsis;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
        .price{
            width: 600px;
            color: #ff6e6e;
            .currency{
                font-size: 22px
            }
            .big{
                font-size: 46px;
            }
            .small{
                font-size: 28px;
                height:28px;
                line-height:28px;
                color:#ccc;
                position:relative;
                margin-left:10px;
                &:after{
                    content:'';
                    display:block;
                    width:100%;
                    height:2px;
                    background:#ccc;
                    top:16px;
                    left:0;
                    position:absolute;
                }
            }
        }
    }
    .detail{
        border-top:1px solid #efefef;
        .title{
            font-size:28px;
            color:#000;
            padding:40px 40px 30px;
        }
        .detail-cont{
            img{
                display:block;
                width:100%;
            }
        }
    }
    .remark{
        padding:0 40px 30px;
        .title{
            font-size:28px;
            color:#000;
        }
        .remark-cont{
            margin-top:30px;
            color:#6b6b6b;
                font-size:24px;    
        }
    }
    .footer{
        position:fixed;
        z-index:10;
        bottom:0;
        left:0;
        height:122px;
        width:750px;
        background:#fff;
        .join,.buy{
            flex:1;
            height:122px;
            line-height:122px;
            text-align:center;
            color:#fff;
            font-size:34px;
        }
        .join{
            background:#ffc800;
        }
        .buy{
            background:#ff6e6e;
        }
    }
    .gg-table{
        width:670px;
        margin:0 auto;
        border:1px solid #ccc;
        flex-direction: row;
        flex-wrap: wrap;
        // border-top:1px solid #ccc;
        // border-left:1px solid #ccc;
        
    }
    .table-group{
            height:60px;
            border-bottom:1px solid #ccc;
            width:50%;
            min-width:50%;
            max-width:50%;
            flex:1;
            &.noline{
                border-bottom:0;
            }
            .table-label{
                height:60px;
                line-height:60px;
                text-indent: 16px;
                width:136px;
                float:left;
                font-size:24px;
                color:#bebebe;
            }
            .table-text{
                height:60px;
                line-height:60px;
                float:left;
                font-size:24px;
                    width: 196px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow:hidden;
            }
        }
        .table-group.table-group2{
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;
            width: 670px;
            min-width:670px;
            max-width:670px;
            margin:0 auto 40px;
            .table-text{
                width: 529px;

            }

        }
</style>
<template>
    <div class="container">
        <div class="imgs">
            <!-- swiper模板 -->
            <div id="imageList" class="swiper-container">
                <div class="swiper-wrapper">
                    <a v-for="(item,i) in info.imageList" class="swiper-slide">
                        <img :src="item" class="swiper-img">
                    </a>
                </div>
                <!-- 如果需要分页器 -->
                <div id="'pagination-page" class="swiper-pagination"></div>
            </div>
            <!-- <img :src="info.mainImageUrl" alt=""> -->
        </div>
        <div class="book-info">
            <div class="name">{{info.itemName}}</div>
            <div class="title">{{info.itemDesc}}</div>
            <div class="price">
                <span class="currency">￥</span>
                <span class="big">{{info.price}}</span>
                <span class="small">￥{{info.issuePrice}}</span>
            </div>
        </div>
        <div class="detail">
            <div class="title">商品详情</div>
            <div class="detail-cont">
                <img v-for="(item,i) in info.detailImageList" :src="item" alt="">
            </div>
        </div>
        <div class="detail">
            <div class="title">规格</div>
            <div class="detail-cont">
                <div class="gg-table flex">
                    <div class="table-group clearfix">
                        <div class="table-label">书名</div>
                        <div class="table-text">{{info.itemName}}</div>
                    </div>
                        <div class="table-group clearfix">
                        <div class="table-label">出版社</div>
                        <div class="table-text">{{info.press}}</div>
                    </div>
                    <div class="table-group clearfix">
                        <div class="table-label">作者</div>
                        <div class="table-text">{{info.author}}</div>
                    </div>
                    
                    <div class="table-group clearfix">
                        <div class="table-label">开本</div>
                        <div class="table-text">{{info.format}}</div>
                    </div>
                    <div class="table-group clearfix  noline">
                        <div class="table-label">是否套装</div>
                        <div class="table-text">{{info.isSuit===0?'否':'是'}}</div>
                    </div>
                    
                    <div class="table-group clearfix noline">
                        <div class="table-label">装订方式</div>
                        <div class="table-text">{{info.bindingWay}}</div>
                    </div>
                </div>
                <div class="table-group table-group2 clearfix">
                    <div class="table-label">ISBN编号</div>
                    <div class="table-text">{{info.iSBN}}</div>
                </div>
            </div>
        </div>

        <div class="remark">
            <div class="title">运费说明</div>
            <div class="remark-cont" v-html="feeDesc"></div>
        </div>
        
        <div class="footer flex">
            <div @click="addBook(info)" class="join">加入书袋</div>
            <router-link :to="{name:'order_confirm',query:{itemCode:info.itemCode}}" tag="div" class="buy">立即购买</router-link>
        </div>

        <bookcar></bookcar>
    </div>
</template>
<script>
    import bookcar from "commonvue/bookcar";
    export default{
        components: {
            bookcar,
        },
        data(){
            return{
                info:{},
                feeDesc:'',
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                if(this.$route.query.itemCode){
                    this.getInfo();
                    this.getCarriageFeeDesc();
                }
            });
        },
        methods: {
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/item/getItemDetail',
                    data:{
                        itemCode:this.$route.query.itemCode
                    },
                    goingError:true,
                    success:(data=>{
                        if(data.data.imageList&&data.data.imageList.length>0){
                            data.data.imageList.unshift(data.data.mainImageUrl)
                        }else{
                            data.data.imageList = [data.data.mainImageUrl]
                            console.log(data.data.imageList)
                        }
                        this.info = data.data;
                        this.$nextTick(()=>{
                            this.createdSwiper('imageList')
                        })
                    }),
                    error:(data=>{
                        if(data.code===3021){
                            //直接弹出错误信息
                            popup.alert({ 
                                content: data.desc,
                                yes:()=>{
                                    router.go(-1)
                                }
                            });
                        }else{
                            //直接弹出错误信息
                            popup.alert({ content: data.desc });
                        }
                    })
                })
            },
            addBook(item){
                server.addShoppingCar(item.itemCode)
            },
            getCarriageFeeDesc(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/home/getCarriageFeeDesc',
                    success:(data=>{
                        this.feeDesc = data.data;
                    })
                })
            },
            createdSwiper(id){
                new Swiper (`#imageList`, {
                    loop: false, // 循环模式选项
                    autoplay:true,
                    // 如果需要分页器
                    pagination: {
                        el: `#pagination-page`,
                    },
                })  
            }
        },
    }
</script>
